
$(function() {
	var count = 1;
    var num = 1
    var inputTotal = 24 * count + 3
    var barHRatio = 0
    var inputClickNum = 0
    $('#form1').append(getStr());
    // 默认选中是
    //$("input[value='是']").attr('checked','true');
    $('.more').click(function (e) {
        num ++
        $('#form'+ count).after("<form id='form"+num+"' class='form'><div class='box'><i id='delete"+num+"' class='icon glyphicon glyphicon-remove'></i></div></form>")
        $('#form'+ num+ ' .box').append(getStr())
        // 默认选中是
        // $("input[value='1']").attr('checked','true');
        $('#delete'+ num).click(function (e) {
          var clickNum = 0
          $('#form' + num + ' input').each(function( i, el){
            if ($(el).attr('name') == 'tradeName' || $(el).attr('name') == 'companyName' || $(el).attr('name') == 'personalName' || $(el).attr('name') == 'phone' || $(el).attr('name') == 'advise') {
              if ($(el).val() != '') {
                clickNum++
              }
            } else {
              if($(el).is(':checked')){
                clickNum++
              }
            }
          })
          $('#form'+ num).remove()
          num--
          count = num
          inputTotal = 24 * count + 3
          inputClickNum = inputClickNum - clickNum
          // console.log(inputClickNum, inputTotal, 'delete')
          showRatio()
        })
        count = num
        inputTotal = 24 * count + 3
        // console.log(inputClickNum, inputTotal, 'more')
        showRatio()
      })
      $(document).scroll(function () {
        var scrollTop = $(document).scrollTop()
        $("#progressBar").css('top', scrollTop + 200)
      })
      $("body").on("click", "input", function(){
        var $this = $(this);
        // var formIdNum = parseInt($this.parents('.form').attr('id').substring(4))
        if (!$this.attr('clicked') || $this.attr('clicked') === "no") { // 未点击
          if ($this.attr('name') == 'tradeName' || $this.attr('name') == 'companyName' || $this.attr('name') == 'personalName' || $this.attr('name') == 'phone' || $this.attr('name') == 'advise') {
            $this.attr('clicked', "yes");
          } else {
            if (!$this.parents('.form-group').attr('clicked') || $this.attr('clicked') === "no") {
              $this.parents('.form-group').attr('clicked', "yes");
              inputClickNum++
            }
          }
        }
        // console.log(inputClickNum, inputTotal, 'click')
        showRatio()
      })
      $("body").on("focus", "input", function () {
        var _this = $(this)
        if (_this.attr('clicked') === "yes") {
          if (_this.attr('name') === 'tradeName' || _this.attr('name') === 'companyName' || _this.attr('name') === 'personalName' || _this.attr('name') === 'phone' || _this.attr('name') == 'advise') {
            if (_this.val() != '') {
              inputClickNum--
            }
          }
        }
        // console.log(inputClickNum, inputTotal, 'focus')
        showRatio()
      })
      $("body").on("blur", "input", function () {
        var $$this = $(this);
        if ($$this.attr('clicked') === "yes") {
          if ($$this.attr('name') === 'tradeName' || $$this.attr('name') === 'companyName' || $$this.attr('name') === 'personalName' || $$this.attr('name') === 'phone' || $$this.attr('name') == 'advise') {
            if ($$this.val() != '') {
              inputClickNum++
            }
          }
        }
        // console.log(inputClickNum, inputTotal, 'blur')
        showRatio()
      })

    $('#submit').click(function (e) {
      
      for(var i=1;i<=count;i++) {
	      for (var j = 2; j <= 23; j++) {
	        if (!$("#form" + i +" input[name='question" + j + "']:checked").val() || $("#form" + i +" input[name='question" + j + "']:checked").val() === '') {
	          $("#form" + i +" input[name='question" + j + "']").addClass('has-error')
	          $("#form" + i +" input[name='question" + j + "']").parent('.radio-box').parent('.form-group').children('.radio-error').html('请选择答案')
	        } else {
	          $("#form" + i +" input[name='question" + j + "']").removeClass('')
	          $("#form" + i +" input[name='question" + j + "']").parent('.radio-box').parent('.form-group').children('.radio-error').html('')
	        }
	      }
	   }
      
      var radio_flag = true;
      for(var i=1;i<=count;i++) {
    	  for (var j = 2; j <= 23; j++) {
    		  if (!$("#form" + i +" input[name='question" + j + "']:checked").val() || $("#form" + i +" input[name='question" + j + "']:checked").val() === '') {
        		  radio_flag = false;
        	  }
    	  }
      }
      
      var tradeName = $("input[name='tradeName']")
      tradeName.each(function( i,ele){
        console.log($(ele).val(),"===")
        if($(ele).val() === ''){
          $(ele).parent('.form-inline').addClass('has-error')
          $(ele).next('.trade-name-error').html('请填写厂商名称')
          //layer.alert('有未填项，请核查！', {icon : 3,offset: '100px'}); 
          alert('有未填项，请核查！')
          return;
        }else{
          $(ele).parent('.form-inline').removeClass('has-error')
          $(ele).next('.trade-name-error').html('')
        }
      })
      
      var advise = $("input[name='advise']");
      advise.each(function( i,ele){
        if($(ele).val() === ''){
          $(ele).parent('.form-inline').addClass('has-error')
          $(ele).next('.trade-name-error').html('请填写意见或建议')
          //layer.alert('有未填项，请核查！', {icon : 3,offset: '100px'}); 
          alert('有未填项，请核查！');
          return;
        }else{
          $(ele).parent('.form-inline').removeClass('has-error')
          $(ele).next('.trade-name-error').html('')
        }
      })
      
      var companyName = $("input[name='companyName']")
      if(companyName.val() === ''){
        companyName.parent('.info-group').addClass('has-error')
        companyName.next('.error').html('请输入企业名称')
        return;
      }else{
        companyName.parent('.info-group').removeClass('has-error')
        companyName.next('.error').html('')
      }
      var personalName = $("input[name='personalName']")
      if(personalName.val() === ''){
        personalName.parent('.info-group').addClass('has-error')
        personalName.next('.error').html('请填写姓名')
        return;
      }else{
        personalName.parent('.info-group').removeClass('has-error')
        personalName.next('.error').html('')
      }
      var phone = $("input[name='phone']")
      if(phone.val() === ''){
        phone.parent('.info-group').addClass('has-error')
        phone.next('.error').html('请填写电话')
        return;
      }else if(phone.val() != ''){
    	  var reg = /^1[34578]\d{9}$/;
    	  if(!reg.test(phone.val())){
    		  phone.parent('.info-group').addClass('has-error')
    	      phone.next('.error').html('电话号码格式错误！')
    			//layer.alert("电话号码格式错误！", {icon : 3,offset: '100px'});
    			return;
    	  }else{
    		  phone.parent('.info-group').removeClass('has-error')
    	        phone.next('.error').html('')
    	  }
      }else{
        phone.parent('.info-group').removeClass('has-error')
        phone.next('.error').html('')
      }
      
      
      if(!radio_flag){
    	  //layer.alert('有未填项，请核查！', {icon : 3,offset: '100px'}); 
    	  alert('有未填项，请核查！');
    	  return;
      }
      
      var obj = {};
      
      //获取所有表单的id
      for(var i=1;i<=count;i++) {
      	obj['key'+i] = $('#form'+ i).serialize();  
      }
      obj['key'] = $('#form').serialize();  
      
     layer.load(4);
      
	 $.ajax({
		type : "post",
		url :  "questionnaireOper/insert",
		data : obj,
		dataType : "json",
		success : function(data) {
			layer.closeAll();
			if (data.flag) {
				//layer.alert('提交成功！', {icon : 1,offset: '100px'});
				alert('提交成功！');
				window.location.replace("https://www.xin-an.org.cn/");
			}
		},
		error : function(data) {
			layer.closeAll();
		}
	});
    })
    function showRatio(){
        barHRatio = ((inputClickNum / inputTotal) * 100).toFixed(2) + '%'
        $("#progressBar").css('display', 'block')
        $('#progressText').html(barHRatio)
        $('#bar').height(barHRatio)
    }
});

function getStr(){
	var str = `<div class="question_box">
        <div class="form-group">
        <label class="title">1.信安系统建设厂商名称？</label>
        <div class="form-inline">
          <input type="text" class="form-control trade-name" name="tradeName" required>
          <label class="trade-name-error"></label>
        </div>
      </div>
      <div class="form-group">
        <label class="title">2.厂商服务质量是否满足要求？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question2" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question2" value="否">
          <span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="title">3.系统故障是否能及时修复？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question3" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question3" value="否">
          <span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="title">4.厂商是否能满足系统升级、改造、扩容等业务需求？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question4" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question4" value="否">
          <span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="title">5.系统功能是否符合标准要求？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question5" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question5" value="否">
          <span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="title">6.系统功能界面设计和可操作性是否合理？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question6" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question6" value="否">
          <span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="title">7.系统是否具备身份认证和权限管理功能？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question7" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question7" value="否">
          <span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="title">8.系统是否记录操作日志？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question8" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question8" value="否">
          <span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="title">9.系统性能是否满足标准要求？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question9" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question9" value="否">
          <span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="title">10.系统稳定性是否满足安全管理要求？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question10" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question10" value="否">
          <span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="title">11.系统是否具备可扩展能力？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question11" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question11" value="否">
          <span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="title">12.系统处理能力能否全覆盖机房出口带宽？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question12" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question12" value="否">
          <span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="title">13.系统能否具备数据安全自动核验功能？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question13" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question13" value="否">
          <span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="title">14.系统是否存在数据泄露风险？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question14" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question14" value="否">
          <span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="title">15.厂商是否私自使用系统数据用作其他用途？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question15" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question15" value="否">
          <span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="title">16.是否与厂商签订安全保密协议？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question16" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question16" value="否">
          <span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="title">17.系统是否满足三级安全防护要求？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question17" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question17" value="否">
          <span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="title">18.系统是否发生过网络安全事件？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question18" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question18" value="否">
          <span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="title">19.厂商是否定期进行网络安全检测？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question19" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question19" value="否">
          <span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="title">20.厂商是否驻派专门运维人员或区域运维人员？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question20" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question20" value="否">
          <span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="title">21.厂商运维人员是否熟悉信安系统相关专业知识？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question21" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question21" value="否">
          <span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="title">22.厂商对系统运行维护是否满足要求？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question22" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question22" value="否">
          <span>否</span>
        </div>
      </div>
      <div class="form-group">
        <label class="title">23.是否对系统进行7*24小时监控？</label>
        <label class="radio-error"></label>
        <div class="radio-box">
          <input type="radio" name="question23" value="是">
          <span>是</span>
        </div>
        <div class="radio-box">
          <input type="radio" name="question23" value="否">
          <span>否</span>
        </div>
       </div>
        <div class="form-group">
          <label class="title">24.其他意见或建议</label>
          <input type="text" class="form-control trade-name" name="advise" required>
          <label class="trade-name-error"></label>
        </div>         
      </div>`
	return str;
}